<template>
  <div class="rule">
    <div class="rule-header">
    </div>
    <div class="rule-text">
      <ul class="rule-text-item">
        <li class="rule-text-list">1. 用户每天均有3次抽卡机会。</li>
        <li class="rule-text-list">2. 每天凌晨（0:00）会清空前一天剩余抽奖机会，并再送出每天的3次抽卡机会。</li>
        <li class="rule-text-list">
          3. 关注“Merci萌西烘培”微信号，可额外获得两次抽卡机会。
          <div class="attention" @click="openAttentionShow">点击关注</div>
        </li>
        <li class="rule-text-list">4.求助好友：请好友帮忙助力抽卡集字。</li>
        <li class="rule-text-list">5.赠字给好友：点击“感恩回馈幸福美味”任意一个你已经获得的字，即可赠送给您的好友，可以赠送多次哦！</li>
        <li class="rule-text-list">6. 集满以上8个文字的用户，可添加萌西客服（微信号：13459201961），截图集满的文字发送给客服，即可领取奖品。</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Rule',
  methods: {
    //给父组件传递事件
    openAttentionShow () {
      this.$emit('openAttentionShow')
    }
  }
}
</script>

<style lang="stylus" scoped>
  .rule
    width 650px
    margin 0 auto
    .rule-header
      width 463px
      height 75px
      margin 0 auto 
      background url("../assets/img/rule-header-background.png") no-repeat
      background-size cover
    .rule-text
      margin-top 57px
      height 620px
      .rule-text-item
        height 100%
        font-size  32px
        color #fff
        display flex
        flex-direction column
        justify-content space-between
        .rule-text-list
          line-height 40px
        .attention
          width 270px
          height 70px
          background url("../assets/img/gift-word.png") no-repeat
          background-size cover
          text-align center
          line-height 72px
          margin-top 10px
</style>
